<template>
  <div class='directorys-container'>
    <div class="app-container">
      <!-- 外部卡片 -->
      <el-card class="box-card">
        <!-- 面包屑区域 -->
        <div slot="header" class="clearfix" v-if="this.$route.query.id">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 表单区域 -->
        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline" size="mini">
          <el-form-item label="目录名称" style="margin-right:50px" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="form.status"
              placeholder="请选择">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="hClear">清除</el-button>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
          <el-form-item class="fr">
            <el-button
              type="text"
              v-if="this.$route.query.id"
              @click="hJump">
              <i class="el-icon-back"></i>
              返回学科
            </el-button>
            <el-button type="success" @click="hAlert">
              <i class="el-icon-edit"></i>
              新增目录
            </el-button>
          </el-form-item>
        </el-form>
        <!-- 数据记录 -->
        <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          :closable="false"
          class="alert"
          show-icon>
        </el-alert>
        <!-- 数据显示区域-表格 -->
        <el-table
          sortable
          style="text-align:center width: 100%"
          :data="tableData"
        >
          <el-table-column
            align="center"
            prop="id"
            label="序号"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="subjectName"
            label="所属学科"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="directoryName"
            label="目录名称">
          </el-table-column>
          <el-table-column
            align="center"
            prop="username"
            label="创建者">
          </el-table-column>
          <el-table-column
            align="center"
            width="160"
            label="创建日期">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | format}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="totals"
            label="面试题数量">
          </el-table-column>
          <el-table-column
            align="center"
            label="状态">
            <template slot-scope="scope">
              <span>{{ scope.row.state ===1 ? '已启用' : '已禁用' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
            width="140"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="hState(scope.row)"
                type="text"
                size="small">
                {{scope.row.state === 1 ? '禁用' : '启用'}}
              </el-button>
              <el-button
                @click.native.prevent="hChange(scope.row)"
                type="text"
                :disabled="scope.row.state === 1 ? true : false "
                size="small">
                修改
              </el-button>
              <el-button
                @click.native.prevent="hDelete(scope.row)"
                type="text"
                :disabled="scope.row.state === 1 ? true : false "
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div class="pagination clearfix">
          <el-pagination
            background
            class="fr"
            @size-change="hSizeChange"
            @current-change="hCurChange"
            :current-page='requestParams.page'
            layout="prev, pager, next, sizes, jumper"
            :total="totalCount">
          </el-pagination>
        </div>
        <!-- 弹出层 -->
        <add-dialog
          ref="addDialog"
          :title="titleInfo"
          :flagID="flagid"
          :changeForm="changeForm"
          @addData="add">
        </add-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入路由
// import router from '@/router/index.js'
// router.beforeEach((to,from,next)=>{
//   if (to.path === '/subjects/directorys') {

//   } else {
//     next()
//   }
// })
// 导入添加目录组件
import AddDialog from '@/module-hmmm/components/directorys-add.vue'
// 导入Vue
import Vue from 'vue'
// 导入moment
import moment from 'moment'
import { list, detail, add, update, remove, changeState } from '@/api/hmmm/directorys.js'
// 定义日期时间格式化过滤器
Vue.filter('format', function (val) {
  return moment(val).format('YYYY-MM-DD HH:mm:ss')
})
export default {
  name: 'page-directorys',
  data () {
    return {
      form: {
        name: null,
        status: null
      },
      // 从后台获取到数据的总条数
      totalCount: 0,
      // alert显示的数据内容
      alertText: '',
      tableData: [],
      // 需要传递的参数
      requestParams: {
        // 当前页数
        page: 1,
        pagesize: 10,
        subjectID: null,
        directoryName: null,
        state: null
      },
      // 弹出框显示标题
      titleInfo: {
        pageTitle: '目录',
        text: ''
      },
      // 获取目录详情
      changeForm: {
        id: null,
        directoryName: '',
        subjectID: ''
      },
      flagid: '',
      path: window.location.hash
    }
  },
  components: {
    AddDialog
  },
  created () {
    // 实例创建完成之后获取数据列表
    if (this.$route.query.id) {
      this.requestParams.subjectID = this.$route.query.id
      this.getList()
    } else {
      this.getList()
    }
  },
  watch: {
    '$route.query.id': function () {
      this.requestParams.subjectID = null
      console.log(this.requestParams)
      this.getList()
    }
  },
  methods: {
    // 点击按钮跳转回列表
    hJump () {
      this.$router.push('list')
    },
    // 清除表单
    hClear () {
      this.$refs.form.resetFields()
      this.requestParams.directoryName = null
    },
    // 点击搜索时所触发的事件
    onSubmit () {
      this.requestParams.page = 1
      this.requestParams.directoryName = this.form.name
      this.requestParams.state = this.form.status
      this.getList()
    },
    // 获取数据列表
    async getList () {
      const result = await list(this.requestParams)
      // 表格数据
      this.tableData = result.data.items
      // 总条数数据
      this.totalCount = result.data.counts
      this.alertText = `数据一共${result.data.counts}条`
    },
    // 页码发生改变时重新获取数据
    hCurChange (newPage) {
      this.requestParams.page = newPage
      this.getList()
    },
    // 每页显示条数发生改变时
    hSizeChange (newSize) {
      this.requestParams.page = 1
      this.requestParams.pagesize = newSize
      this.getList()
    },
    // 点击新增目录
    hAlert () {
      // 改变弹框标题
      this.titleInfo.text = '新增'
      // 将搜索区的内容置空
      this.hClear()
      // 每次打开置空操作
      if (this.$route.query.id) {
        this.changeForm.directoryName = ''
        this.changeForm.id = null
        this.changeForm.subjectID = parseInt(this.$route.query.id)
        this.flagid = parseInt(this.$route.query.id)
      } else {
        this.changeForm = {}
      }
      this.$refs.addDialog.dialogFormV()
    },
    // 添加目录
    async add (obj, text) {
      if (text === '修改') {
        try {
          await update(obj)
          this.$message.success('修改目录成功！')
          this.$refs.addDialog.dialogFormH()
          this.getList()
        } catch {
          this.$message.error('修改目录失败！')
        }
      } else if (text === '新增') {
        try {
          await add(obj)
          this.$message.success('新增目录成功！')
          this.$refs.addDialog.dialogFormH()
          this.getList()
        } catch {
          this.$message.error('新增目录失败！')
        }
      }
    },
    // 点击禁用启用按钮
    hState (row) {
      const data = {
        id: row.id,
        state: ''
      }
      if (row.state === 1) {
        data.state = 0
        this.$confirm('将要禁用, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
          await changeState(data)
          row.state = 0
          this.$message.success('禁用成功!')
        }).catch(() => {
          this.$message.info('已取消操作')
        })
      } else {
        data.state = 1
        this.$confirm('将要启用, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
          await changeState(data)
          row.state = 1
          this.$message.success('启用成功!')
        }).catch(() => {
          this.$message.info('已取消操作')
        })
      }
    },
    // 删除操作
    async hDelete (row) {
      this.$confirm('是否要删除?', '提示', {
        type: 'warning'
      }).then(async () => {
        try {
          await remove(row)
          this.$message.success('删除成功!')
          this.getList()
        } catch {
          this.$message.error('删除失败!')
        }
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    // 修改操作
    async hChange (row) {
      // 改变弹框标题
      this.titleInfo.text = '修改'
      this.$refs.addDialog.dialogFormV()
      // 获取目录详情
      const result = await detail(row)
      this.changeForm.id = result.data.id
      this.changeForm.directoryName = result.data.directoryName
      this.changeForm.subjectID = result.data.subjectID
    }
  }
}
</script>

<style scoped lang='less'>
.alert {
  margin-bottom: 10px;
}
.pagination {
  margin-top: 15px;
}
.el-dialog__footer {
  text-align: right;
}
</style>
